<template>
  <div class="list">
    <cu-header :height="80" />
    <div class="list-container container">
      <div class="sec-filter">
        <div class="filter-title">{{ $t("list.1") }}</div>
        <el-row :gutter="50">
          <el-col :span="8">
            <el-cascader :value="selectArea" :options="multiOptions" :props="{ value: 'code', label: 'name', checkStrictly: false }" :placeholder="$t('list.2')" @change="handleMultiChange" style="width: 100%"></el-cascader>
          </el-col>
          <el-col :span="8">
            <el-cascader :value="selectType" :options="typeList" :props="{ value: 'id', label: 'showName', children: 'categoryList', checkStrictly: false }" :placeholder="$t('list.3')" @change="handleMultiTypeChange" style="width: 100%"></el-cascader>
          </el-col>
          <el-col :span="8">
            <el-input :placeholder="$t('list.4')" v-model="params.remark" style="width: 100%" @change="handleKeywords">
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px" v-if="paramsList.length > 0" :gutter="50">
          <el-form label-position="right" v-for="item in paramsList" :key="item.typeParam.id">
            <el-col v-if="item.typeParam.type == 'select'" :span="8">
              <el-form-item :label="item.typeParam.portugalName" label-width="150px">
                <el-select v-model="item.typeParam.value" :placeholder="$t('component.addGoods.5')" @change="paramsChange" style="width: 100%">
                  <el-option label="Todos" value=""></el-option>
                  <el-option v-for="meta in item.paramValues" :key="meta.id" :label="meta.portugalName" :value="meta.id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div class="filter-title mt20">{{ $t("list.5") }}</div>
        <div class="section-list">
          <span v-for="section in sectionList" :key="section.id">
            <span class="hover-span" @click="goSection(section)"
              >{{ section.showName }}<span style="color: #999999; margin-left: 5px">({{ section.goodsCount }})</span></span
            >
          </span>
        </div>
        <div class="goods-list">
          <div class="godds-item flex" v-for="item in list" :key="item.id">
            <div class="flex-none" style="margin-right: 20px">
              <div class="jingxuan">
                <img @click="handleDetail(item)" style="cursor: pointer" class="goods-img" :src="item.showImg" alt="" />
                <div class="recommend-item-title mv10">
                  <span class="recommend-tag" v-if="item.tag === '1' || item.tag === '3'">{{ $t("component.sendList.6") }}</span>
                </div>
              </div>
            </div>
            <div class="flex-auto width0">
              <div class="goods-info flex flex-column flex-justify-content-between">
                <el-row>
                  <el-col :span="20">
                    <div @click="handleDetail(item)" class="goods-name">{{ item.name }}</div>
                  </el-col>
                  <el-col :span="4" class="text-right">
                    <div class="goods-price">{{ item.price | num2Money }} KZ</div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="20">
                    <div class="goods-desc" v-html="item.des"></div>
                  </el-col>
                  <el-col :span="4"> </el-col>
                </el-row>
                <el-row type="flex" align="middle">
                  <el-col :span="20">
                    <div class="goods-user">
                      <!-- <label class="flex flex-align-items-center">
                        <img class="goods-user-head" :src="domain + item.portrait" alt="" />
                        <span class="ml10">{{ item.creatorNick }}</span>
                      </label> -->
                      <label>
                        <i class="el-icon-location-outline" style="font-size: 18px"></i>
                        <span class="ml5">{{ item.areaName }}</span>
                      </label>
                      <label class="ml40">
                        <i class="el-icon-time" style="font-size: 18px"></i>
                        <span class="ml5">{{ item.createTime }}</span>
                      </label>
                    </div>
                  </el-col>
                  <el-col class="text-right" :span="4">
                    <!--                    <i class="fa fa-heart" style="color: #fb8c24" @click="handleFavorites()" v-if="isFavorites"></i>-->
                    <i class="fa fa-heart-o" style="color: #fb8c24; cursor: pointer; margin-right: 15px" @click="handleFavorites(item)"></i>
                    <!--                    <ShareNetwork-->
                    <!--                      network="facebook"-->
                    <!--                      :url="sharing.url"-->
                    <!--                      :title="sharing.title"-->
                    <!--                      :description="sharing.description"-->
                    <!--                      :quote="sharing.quote"-->
                    <!--                      :hashtags="sharing.hashtags"-->
                    <!--                      :twitterUser="sharing.twitterUser"-->
                    <!--                      @open = open(item)-->
                    <!--                  >-->
                    <!--                   <i class="fa fa-share-alt" style="color: #fb8c24;cursor: pointer;"></i>-->
                    <!--                  </ShareNetwork>-->
                    <i class="fa fa-share-alt" @click="shareFacebook(item)" style="color: #fb8c24; cursor: pointer"></i>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <div class="text-center">
          <el-pagination :page-size="params.pageSize" :pager-count="11" layout="prev, pager, next" :total="total" @current-change="handleCurrent" @pre-click="handlePre" @next-click="handleNext"> </el-pagination>
        </div>
      </div>
    </div>
    <cu-footer />
  </div>
</template>
<script>
import CuHeader from "@/components/header";
import CuFooter from "@/components/footer/index2";
import Api from "@/api";
import { Domain } from "@/constants";
import { isLogin } from "@/utils";
import { facebookShare } from "@/utils/facebook";
export default {
  name: "List",
  components: { CuHeader, CuFooter },
  data() {
    return {
      domain: Domain,
      params: {
        area: "",
        remark: "",
        type: "",
        pageSize: 40,
        pageNo: 1,
        sectionId: "",
        categoryId: "",
        areaCode: "",
      },
      total: 0,
      paramsList: [],
      list: [],
      sectionList: [],
      multiOptions: [],
      typeList: [],
      searchParams: [],
      sharing: {
        url: "https://news.vuejs.org/issues/180",
        title: "Say hi to Vite! A brand new, extremely fast development setup for Vue.",
        description: 'This week, I’d like to introduce you to "Vite", which means "Fast". It’s a brand new development setup created by Evan You.',
        quote: "The hot reload is so fast it's near instant. - Evan You",
        hashtags: "vivebo",
        twitterUser: "youyuxi",
      },
    };
  },
  created() {
    const {
      query: { area = "", keywords = "", type = "" },
    } = this.$route;
    this.params.remark = keywords;
    this.params.area = area;
    this.params.type = type;
    if (type) {
      const types = type.split(",");
      if (types.length > 1) {
        Api.typeParamsList({ typeId: types[1] }).then((res) => {
          this.paramsList = res;
        });
      }
    }
    this.loadTree();
    this.loadType();
    this.loadData();
  },
  computed: {
    selectArea() {
      return this.params.area ? this.params.area.split(",") : [];
    },
    selectType() {
      return this.params.type ? this.params.type.split(",") : [];
    },
  },
  methods: {
    goSection(section) {
      this.$router.push("/list?type=" + section.id);
      this.$router.go(0);
    },
    open(item) {
      (this.sharing.url = "https://www.vivebo.com/client/detail?id=" + item.id), (this.sharing.title = item.name);
      this.sharing.description = item.des;
      this.sharing.quote = "This is Vivebo";
    },
    paramsChange(val) {
      console.log("参数：" + val);
      console.log(this.paramsList);
      this.searchParams = [];
      this.paramsList.forEach((item) => {
        if (item.typeParam.value) {
          let obj = {};
          obj.chinaName = item.typeParam.chinaName;
          obj.englishName = item.typeParam.englishName;
          obj.portugalName = item.typeParam.portugalName;
          item.paramValues.forEach((inner, index) => {
            if (item.typeParam.value === inner.id) {
              obj.chinaNameInner = inner.chinaName;
              obj.englishNameInner = inner.englishName;
              obj.portugalNameInner = inner.portugalName;
              obj.id = inner.id;
            }
          });
          this.searchParams.push(obj);
        }
      });
      console.log(this.searchParams);
      this.loadData();
    },
    loadData() {
      const { selectArea, selectType } = this;
      if (selectType.length > 0) {
        if (selectType.length === 1) {
          this.params.sectionId = selectType[0];
        }
        if (selectType.length === 2) {
          this.params.sectionId = selectType[0];
          this.params.categoryId = selectType[1];
        }
      } else {
        this.params.sectionId = "";
        this.params.categoryId = "";
      }
      if (selectArea.length > 0) {
        this.params.areaCode = "/";
        selectArea.forEach((meta) => {
          if (meta) {
            this.params.areaCode = this.params.areaCode + meta + "/";
          }
        });
      } else {
        this.params.areaCode = "";
      }
      if (this.searchParams.length > 0) {
        this.params.parameterList = JSON.stringify(this.searchParams);
      } else {
        this.params.parameterList = null;
      }
      Api.getGoodsList(this.params, this.params.pageNo, this.params.pageSize).then((res) => {
        this.total = res.total;
        this.list = res.rows.map((item) => {
          const img = item.imgList ? JSON.parse(item.imgList)[0] : "";
          return Object.assign(item, { showImg: Domain + img });
        });
      });
    },
    handleMultiChange(value) {
      this.params.area = value.join(",");
      this.params.pageNo = 1;
      this.loadData();
    },
    handleMultiTypeChange(value) {
      if (value.length == 2) {
        if (value[1]) {
          Api.typeParamsList({ typeId: value[1] }).then((res) => {
            this.paramsList = res;
          });
        } else {
          this.paramsList = [];
        }
      } else {
        this.paramsList = [];
      }
      this.params.type = value.join(",");
      this.params.pageNo = 1;
      this.loadData();
    },
    handleKeywords() {
      this.params.pageNo = 1;
      this.loadData();
    },
    loadTree() {
      Api.areaTree().then((res) => {
        this.multiOptions = res;
        this.multiOptions.forEach((item) => {
          item.children.unshift({ name: "Região-" + item.name, code: null });
        });
        this.multiOptions.unshift({ name: "Angola", code: null });
      });
    },
    loadType() {
      Api.goodsTypeList().then((res) => {
        this.typeList = res;
        this.sectionList = JSON.parse(JSON.stringify(res));
        this.typeList.forEach((meta) => {
          meta.categoryList.unshift({ showName: "Todas as categorias", id: null });
        });
        this.typeList.unshift({ showName: "Todas as categorias", id: null });
      });
    },
    handleDetail(item) {
      this.$router.push({
        path: "/detail",
        query: {
          id: item.id,
        },
      });
    },
    handleCurrent(page) {
      this.params.pageNo = page;
      this.loadData();
    },
    handlePre(page) {
      this.params.pageNo = page;
      this.loadData();
    },
    handleNext(page) {
      this.params.pageNo = page;
      this.loadData();
    },
    handleFavorites(val) {
      if (!isLogin()) {
        this.$login.show();
      } else {
        const params = {
          commodityId: val.id,
        };
        Api.addFavorites(params).then((res) => {
          console.log(res);
          if (res === "SUCCESS") {
            this.$message.success("Success!");
          } else {
            this.$message.success("Canceled!");
          }
          // this.loadFavoritesStatus();
        });
      }
    },
    // loadFavoritesStatus() {
    //   Api.queryFavorites({ commodityId: this.id }).then((res) => {
    //     this.isFavorites = res;
    //   });
    // },
    handleShare(item) {
      console.log(item);
      if (!isLogin()) {
        this.$login.show();
      }
      facebookShare("www.vivebo.com").then((res) => {
        console.log(res);
      });
    },
    shareFacebook(item) {
      window.FB.ui(
        {
          method: "share",
          href: `https://www.vivebo.com/vivebo/share/new/` + item.id,
        },
        function (response) {
          //分享回调，可留空
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.list {
  background: #f2f2f2;
}
.list-container {
  padding: 50px 100px;
  padding-bottom: 100px;
  box-sizing: border-box;
}
.filter-title {
  color: #333;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 12px;
}

/* list */
.goods-list {
  border-top: 3px solid #fff;
  padding-top: 30px;
  overflow: auto;
  .jingxuan {
    position: relative;
    width: 180px;
    height: 170px;
    overflow: hidden;
    border-radius: 4px;
    img {
      width: 100%;
      height: 170px;
      object-fit: cover;
    }
    .recommend-tag {
      color: #fff;
      font-size: 12px;
      background: linear-gradient(235deg, #ff7144 0%, #f63e2d 100%);
      display: inline-block;
      padding: 5px 10px;
      border-radius: 4px;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
}
.godds-item {
  background-color: #fff;
  border-radius: 4px;
  padding: 16px 24px;
  margin-bottom: 12px;
}
.goods-img {
  width: 100%;
  // height: 180px;
  display: inline-block;
  margin-right: 24px;
  object-fit: cover;
}
.goods-info {
  width: 100%;
  // height: 150px;
  height: 100%;
}
.goods-name {
  color: #595959;
  font-size: 20px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  &:hover {
    color: #fb8c24;
  }
}
.goods-price {
  color: #fb8c24;
  font-weight: bold;
  font-size: 18px;
}
.goods-desc {
  color: #999999;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  // max-height: 60px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 10px 0;
}
.goods-user {
  font-size: 14px;
  color: #999999;
  display: flex;
  align-items: center;
}
.goods-user-head {
  width: 24px;
  height: 24px;
  background: #f2f2f2;
  border-radius: 50%;
  display: inline-block;
}

.section-list {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 20px;
  .hover-span {
    margin: 0 20px 0px 0;
    line-height: 40px;
    font-size: 14px;
    color: #666666;
    cursor: pointer;
    &:hover {
      color: #fb8c24;
    }
  }
}
</style>
